<script setup>
import {reactive, toRefs,markRaw} from "vue";
// import Exec from "./action/Exec";
import Command from "./action/Command.vue";
import GRPC from "./action/GRPC.vue";
import HttpGet from "./action/HttpGet.vue";
import TcpSocket from "./action/TcpSocket.vue";



const props = defineProps({
  probeType: {
    type: String,
    default: 'startupProbe',
  },
  title: {
    type: String,
    default: "启动探针(StartupProbe)",
  },
  probe: {
    type: Object,
  },
  containerIndex: {
    type: Number,
  },
  containerType: {
    type: String,
  }
})
let ProbeBasicConfig = {
  initialDelaySeconds: 30,
  periodSeconds: 30,
  timeoutSeconds: 2,
  failureThreshold: 2,
  successThreshold: 1
}
const data = reactive({
  options: {
    probeHandler: "close",
    probeHandlers: [
      {
        label: "关闭",
        value: "close"
      },
      {
        label: "执行命令",
        value: "exec"
      },
      {
        label: "调用接口",
        value: "httpGet"
      },
      {
        label: "探测端口",
        value: "tcpSocket"
      },
      {
        label: "GRPC",
        value: "grpc"
      },
    ],
    probeBasicConfig: ProbeBasicConfig,
    probeConfig: {
      exec: {
        command: [],

      },
      httpGet: {
          path: "/",
          port: 8080,
          host: '',
          scheme: 'HTTP',
          httpHeaders: [],
      },
      tcpSocket: {
          port: 8080,
          host: '',
      },
      grpc: {
          port: 8080,
          service: '',
      },
    },
    probeActionComp:{
      'exec': markRaw(Command),
      'httpGet': markRaw(HttpGet),
      'tcpSocket': markRaw(TcpSocket),
      'grpc': markRaw(GRPC)
    }
  }
})

const emits = defineEmits(['probeChangedRollback'])

const  probeChanged = ()=>{
    console.log("当前检查方式: ",data.options.probeHandler)
    // 删除之前的配置
  Reflect.deleteProperty(ProbeBasicConfig, 'exec')
  Reflect.deleteProperty(ProbeBasicConfig, 'httpGet')
  Reflect.deleteProperty(ProbeBasicConfig, 'tcpSocket')
  Reflect.deleteProperty(ProbeBasicConfig, 'grpc')


  if (data.options.probeHandler === 'close'){
      // props.probe = {}
    emits('probeChangedRollback',{})
  }else {
    ProbeBasicConfig[data.options.probeHandler] = data.options.probeConfig[data.options.probeHandler]
    // props.probe = ProbeBasicConfig
    emits('probeChangedRollback',ProbeBasicConfig)
  }

}

const {options} = toRefs(data)
</script>

<template>
  <el-card >
    <template #header>
      <div class="auto-space-between">
        <span>{{props.title}}</span>
        <el-select  v-model="options.probeHandler" style="width: 240px" @change="probeChanged()">
          <el-option
            v-for="probe in options.probeHandlers"
            :key="probe.value"
            :label="probe.label"
            :value="probe.value"
          >
          </el-option>
        </el-select>
      </div>
    </template>
    <!--  健康检查配置  -->
    <div v-show="options.probeHandler !== 'close'" >
      <!--  通用配置  -->
      <div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="延迟检查" >
              <el-input-number :controls="false" v-model.trim="ProbeBasicConfig.initialDelaySeconds" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="检查间隔" >
              <el-input-number :controls="false" v-model.trim="ProbeBasicConfig.periodSeconds" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="超时时间" >
              <el-input-number :controls="false" v-model.trim="ProbeBasicConfig.timeoutSeconds" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="失败次数" >
              <el-input-number :controls="false" v-model.trim="ProbeBasicConfig.failureThreshold" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成功次数" >
              <el-input-number :controls="false" v-model.trim="ProbeBasicConfig.successThreshold" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row>
      </div>
      <!-- 检查方式配置 -->
      <div v-if="options.probeHandler !== 'close'"  >
        <component
            :container-type="props.containerType"
            :container-index="props.containerIndex"
            :probe-type="props.probeType"
            :probe-config="ProbeBasicConfig"
            :is="options.probeActionComp[options.probeHandler]"

        ></component>
      </div>
    </div>
  </el-card>
</template>

<style scoped>


</style>